import React from 'react';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts/lib/echarts';
import { Button } from 'antd';

// function AutomaticEcharts ({dataArr,xData,dataArr1,dataArr2,dataArr3,dataArr4,dataArr5,dataArr6,dataArr7,data,dispatch}){
class AutomaticEcharts extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            timer:null
        };
        this.pause = this.pause.bind(this);
    }
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        const { dataArr,dataArr1,dataArr2,dataArr3,dataArr4,dataArr5,dataArr6,dataArr7 } = this.props;
        var myChart = echarts.init(document.getElementById('main'));
        console.log(dataArr)
        // var arr=[{data:1},{data:2},{data:3},{data:4},{data:5},{data:6}]
        var arr = dataArr;
        var arr1 = dataArr1;
        var arr2 = dataArr2;
        var arr3 = dataArr3;
        var arr4 = dataArr4;
        var arr5 = dataArr5;
        var arr6= dataArr6;
        var arr7= dataArr7;
        var data = [{ 'value': [-1, 0] }];
        var data1 = [{ 'value': [-1, 0] }];
        var data2 = [{ 'value': [-1, 0] }];
        var data3 = [{ 'value': [-1, 0] }];
        var data4 = [{ 'value': [-1, 0] }];
        var data5 = [{ 'value': [-1, 0] }];
        var data6 = [{ 'value': [-1, 0] }];
        var data7 = [{ 'value': [-1, 0] }];
        var i = 0;


        // var data = [{'value':['1',100]},{'value':['2',100]},{'value':['3',100]},{'value':['4',100]}];

        console.log(data)
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '动态数据 + 时间坐标轴'
            },
            legend: {
                data:['曲线','曲线1','曲线2','曲线3','曲线4','曲线5','曲线6','曲线7',]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    return params.value[0] + ' / ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            toolbox: {
                feature: {
                    // dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    saveAsImage: {} //存取为图片
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                splitLine: {
                    show: true
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                },
                max:0.015

            },
           
            series: [{
                name: '曲线',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            },{
                name: '曲线1',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data1
            },{
                name: '曲线2',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data2
            },{
                name: '曲线3',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data3
            },{
                name: '曲线4',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data4
            },{
                name: '曲线5',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data5
            },{
                name: '曲线6',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data6
            },{
                name: '曲线7',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data7
            }
        ]
        };
        myChart.setOption(option);
        this.setState({
            timer : setInterval(function () {
                var now = new Date();
                var now1 = [now.getHours(), now.getMinutes(), now.getSeconds()].join(':')
                if(data.length>10){
                    data.splice(0,1)
                    data1.splice(0,1)
                    data2.splice(0,1)
                    data3.splice(0,1)
                    data4.splice(0,1)
                    data5.splice(0,1)
                    data6.splice(0,1)
                    data7.splice(0,1)
                }
                data.push({ 'value': [now1, arr[i]] })
                data1.push({ 'value': [now1, arr1[i]] })
                data2.push({ 'value': [now1, arr2[i]] })
                data3.push({ 'value': [now1, arr3[i]] })
                data4.push({ 'value': [now1, arr4[i]] })
                data5.push({ 'value': [now1, arr5[i]] })
                data6.push({ 'value': [now1, arr6[i]] })
                data7.push({ 'value': [now1, arr7[i]] })
               
                i++;
                myChart.setOption(option);
            }, 1000)
        })
         
     
    }
  
    
     pause() {
        clearInterval(this.state.timer)
    }
    render() {
        return (
            <div>
                <Button type="primary" style={{ float:"right"}} onClick={this.pause}>
                    终止
               </Button>
            
                <div id="main" style={{ width: 1600, height: 700 }}></div>

            </div>

        );
    }
}
// export default LineMarkerEcharts;
export default connect(({ echart }) => ({ ...echart }))(AutomaticEcharts)